<template>
  <div class="margin-container-list radius-container">
    <div class="border-b pad-10 font-w font-15 topbar-style">支付记录</div>
    <div class="table-container pad-20">
      <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--medium el-table--scrollable-x">
        <div class="el-table__body-wrapper" v-loading="loading">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
            <thead class="el-table__header">
              <tr>
                <th width="135"><div class="cell">微客</div></th>
                <th width="135"><div class="cell">结算方式</div></th>
                <th width="135"><div class="cell">验收内容</div></th>
                <th width="135"><div class="cell">支付百分比</div></th>
                <th width="135"><div class="cell">支付金额</div></th>
                <th width="135"><div class="cell">支付状态</div></th>
                <th width="160"><div class="cell">支付时间</div></th>
                <th width="150"><div class="cell">备注</div></th>
              </tr>
            </thead>
            <tbody>
              <template v-for="(item,indexOn) in taskCommissionList">
                <tr :key="indexOn">
                  <td :rowspan="item.col" v-if="item.username"><div class="cell">{{ item.username }}</div></td>
                  <td><div class="cell">{{ stageStatuss[item.stageStatus] }}</div></td>
                  <td><div class="cell">{{ item.stageName }}</div></td>
                  <td><div class="cell">5%</div></td>
                  <td><div class="cell">{{ item.amount }}</div></td>
                  <td><div class="cell">{{ paymentStatuss[item.paymentStatus] }}</div></td>
                  <td><div class="cell">{{ item.paymentTime }}</div></td>
                  <td><div class="cell">{{ item.remark }}</div></td>
                </tr>
              </template>
              <tr v-if="!taskCommissionList || taskCommissionList.length===0">
                <td colspan="8" class="is-center">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- 列表分页 -->
    <div class="pagination pad-20">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="taskCommissionListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="taskCommissionListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!-- 打款弹窗 -->
    <el-dialog :title="financeTitle" :visible.sync="financeVisible" :close-on-press-escape="true" width="650px">
      <el-form :model="taskCommissionForm" label-width="130px" :rules="rules" ref="taskCommissionForm" class="pad-t-10">
        <el-form-item label="任务酬金：" prop="amount"><span class="font-red font-18">{{ amount }}</span></el-form-item>
        <el-form-item label="手续费：" prop="chargeAmount"><span class="font-red font-18">{{ chargeAmount }}</span></el-form-item>
        <el-form-item label="验收内容：" prop="remark"><span class="font-red font-18">{{ remark }}</span></el-form-item>
        <el-form-item label="支付方式：" prop="remunerationType">
          <div class="radio-bar">
            <el-radio-group v-model="taskCommissionForm.remunerationType" @change="remunerationTypeChange(taskCommissionForm.remunerationType)">
              <div v-for="type in remunerationTypeTypes" class="mar-b-10">
                <el-radio :label="type.key">
                  <div class="radio-border">
                    <svg-icon :class="type.icon" :icon-class="type.icon" />
                    <span class="radio-txt">{{type.value}}</span>
                  </div>
                </el-radio>
              </div>
            </el-radio-group>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="financeVisible = false">取消</el-button>
        <el-button type="primary" @click="residualss">确认追加酬金</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .svg-icon{
    margin-right: 6px;

  }
  .wechatRadius{
    font-size: 26px;
  }
  .alipay{
    font-size: 60px;
    height: 30px;
  }
  .radio-txt{
    vertical-align: top;
    display: inline-block;
    padding-top: 6px;
  }
  .radio-border{
    border:#ccc 1px solid;
    vertical-align: middle;
    display: inline-block;
    padding: 5px 10px;
    width: 150px;
    height: 40px;
  }
</style>

<script>
  import { pagingTaskCommission, residuals } from '@/api/project/taskCommission'
  // 支付表
  export default {
    props: {
      //  任务id
      taskId: {
        type: String
      },
      taskStatus: {
        type: String
      },
      taskType: {
        type: String
      }
    },
    data() {
      return {
        taskCommissionList: [],
        paymentStatuss: [],
        stageStatus: [],
        amount: 0,
        remark: '',
        total: null,
        listLoading: true,
        financeVisible: false,
        financeTitle: null,
        taskCommissionForm: {
          taskName: '',
          remunerationType: '1'
        },
        multipleSelection: [],
        taskCommissionListQuery: {
          currentPage: 1,
          size: 10,
          taskId: ''
        },
        taskCommission: {
          taskCommissionId: '',
          taskId: '',
          username: '',
          stageStatus: '',
          stageName: '',
          amount: '',
          paymentStatus: '',
          paymentTime: '',
          remark: ''
        },
        rules: {
          taskName: [
            { required: true, message: '任务酬金', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '验收内容', trigger: 'blur' }
          ],
          remunerationType: [
            { required: true, message: '支付方式', trigger: 'blur' }
          ]
        },
        remunerationTypeTypes: [
          { key: '1', value: '支付宝', icon: 'alipay' },
          { key: '2', value: '微信支付', icon: 'wechatRadius' }
        ],
        loading: true
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      this.initTaskCommissionList()
    },
    methods: {
      initTaskCommissionList() {
        this.listLoading = true
        this.taskCommissionListQuery.taskId = this.taskId
        pagingTaskCommission(this.taskCommissionListQuery).then(response => {
          if (response.isError) return
          this.taskCommissionList = response.records
          if (response.dict) {
            this.paymentStatuss = response.dict.paymentStatus
            this.stageStatuss = response.dict.stageStatus
          }
          this.total = response.total
          this.listLoading = false
          this.loading = false
          // 列表数据先排序，按首字母排序
          this.taskCommissionList.sort(
            function compareFunction(a, b) {
              return a.username.localeCompare(b.username, 'zh')
            }
          )
          // console.log(this.taskCommissionList)
          // 对数据处理，相同的username只保留第一个，统计重复username条数
          const map = {}
          const dest = []
          for (let i = 0; i < this.taskCommissionList.length; i++) {
            const ai = this.taskCommissionList[i]
            if (!map[ai.username]) {
              dest.push({
                username: ai.username,
                taskCommissionId: ai.taskCommissionId,
                taskId: ai.taskId,
                stageStatus: ai.stageStatus,
                stageName: ai.stageName,
                amount: ai.amount,
                paymentStatus: ai.paymentStatus,
                paymentTime: ai.paymentTime,
                remark: ai.remark,
                col: 1
              })
              map[ai.username] = ai
            } else {
              for (let j = 0; j < dest.length; j++) {
                const dj = dest[j]
                if (dj.username === ai.username) {
                  dj.col++
                  dest.push({
                    taskCommissionId: ai.taskCommissionId,
                    taskId: ai.taskId,
                    stageStatus: ai.stageStatus,
                    stageName: ai.stageName,
                    amount: ai.amount,
                    paymentStatus: ai.paymentStatus,
                    paymentTime: ai.paymentTime,
                    remark: ai.remark
                  })
                  break
                }
              }
            }
          }
          this.taskCommissionList = dest
          // this.taskCommissionList = []
          // console.log(this.taskCommissionList)
        })
      },
      remunerationTypeChange(e) {
        this.$bus.$emit('project.task.edit.remunerationType', e)
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.taskCommissionListQuery.ascs = 'createTime'
            this.taskCommissionListQuery.descs = ''
          } else {
            this.taskCommissionListQuery.ascs = ''
            this.taskCommissionListQuery.descs = 'createTime'
          }
        }
        this.initTaskCommissionList()
      },
      taskCommissionReset() {
        this.taskCommission = {
          taskCommissionId: '',
          taskId: '',
          username: '',
          stageStatus: '',
          stageName: '',
          amount: '',
          paymentStatus: '',
          paymentTime: '',
          remark: ''
        }
      },
      handleSearch() {
        this.taskCommissionListQuery.currentPage = 1
        this.initTaskCommissionList()
      },
      handleSizeChange(val) {
        this.taskCommissionListQuery.size = val
        this.initTaskCommissionList()
      },
      handleCurrentChange(val) {
        this.taskCommissionListQuery.currentPage = val
        this.initTaskCommissionList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 托管追加酬金
      residualss() {
        residuals(this.taskCommission).then(response => {
          this.$message({
            message: '打款成功',
            type: 'success'
          })
          this.financeVisible = false
          this.initTaskCommissionList()
        })
      },
      // 详情
      handleCreate() {
      },
      // 托管追加酬金 点击事件
      handleDetails(row) {
        this.taskCommissionReset()
        this.taskCommission.amount = row.amount
        this.taskCommission.taskCommissionId = row.taskCommissionId
        this.amount = row.amount
        this.chargeAmount = row.chargeAmount
        this.remark = row.stageName
        this.financeVisible = true
        this.financeTitle = '全额托管酬金后，再点击【确认打款】按钮后微客将额外收到您支付的酬金款项'
      },
      // 更新任务状态
      handleUpdateStatus(row) {
      }
    },
    mounted() {
    }
  }
</script>
